<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            animation: myanim 3s ease 0s infinite normal ;
            margin: 0 auto;
        }

        /* :hover 鼠标滑过时触发 */
        div:hover{
            animation-play-state: paused;
        }


        @keyframes tarnstanim {
            form{

                background-color: aqua;
            }
            to{
                background-color: aquamarine;
            }
        }
        @keyframes myanim {
            0%{
                width: 100%;
                background-color: red;
            }
            50%{
                width: 0%;
                background-color: rgb(31, 153, 137);
            }
            100%{
                width: 100%;
                background-color: red;
            }
        }

        table td{
            width: 300px;
            text-align: center;
        }
    </style>
</head>
<body>
   
    <h3>@keyframes 创建动画</h3>
    <p>cs实现动画 省性能  js实现会稍微消化性能
    </p>

    <p>关键字 form  to   或者 0% 100%</p>
    <p>percent  或者其他%比 设置中间值</p>

    <h3>anim 执行</h3>
    <p>animation: name duration timing-function delay iteration-count direction </p>

    <table border="1">
        <tr>
            <td>name</td>
            <td>动画名称</td>
        </tr>
        <tr>
            <td>duration </td>
            <td>持续时间 s 设置时要加单位 delay同理</td>
        </tr>
        <tr>
            <td>timing-function</td>
            <td>动画效果的速率</td>
        </tr>
        <tr>
            <td>delay</td>
            <td>延时执行</td>
        </tr>
        <tr>
            <td>iteration-count</td>
            <td>次数 infinite（无限） </td>
        </tr>
        <tr>
            <td>direction</td>
            <td>正向或反向执行  reverse</td>
        </tr>
        <tr>
            <td>animation-play-state</td>
            <td>running 播放 paused 暂停</td>
        </tr>
    </table>

    <h3>
        timing-function
    </h3>
    <table border="1">
        <tr>
            <td>ease</td>
            <td>逐渐变慢</td>
        </tr>
        <tr>
            <td>linear </td>
            <td>...</td>
        </tr>
        <tr>
            <td>ease-in</td>
            <td>加速</td>
        </tr>
        <tr>
            <td>ease-out</td>
            <td>减速</td>
        </tr>
        <tr>
            <td>ease-in-out</td>
            <td>先加速 后减速 </td>
        </tr>
    </table>


    <h3>direction</h3>
    <table border="1">
        <tr>
            <td>nomal</td>
            <td>默认 正向执行</td>
        </tr>
        <tr>
            <td>alternate </td>
            <td>偶数时正向 奇数时反向执行</td>
        </tr>

    </table>

    <div class="box"></div>


    <h3 style="margin-top: 40px;margin-bottom: 20px;">更详细的学习参考资料</h3>
    <p><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation">css animation</a></p>
</body>
</html>